<template>
	<!-- 验证码登录 - 暂已弃用 -->
	<view>
		<!-- <unavbar></unavbar> -->
		<!-- 登录NFT Marketplace -->
		<view class="title">{{i18n.login1}}</view>
		<!-- 欢迎使用NFT Marketplace -->
		<view class="title_h1">{{i18n.login2}}</view>
		<view class="input_num">
			<!-- 请输入手机号 -->
			<u-input class="u_input1" v-model="params.login_account" type="text" :border="true" height="106"
				:placeholder="i18n.login3" placeholderStyle="color:#CCCCCC" />
		</view>
		<view class="input_flex">
			<!-- 请输入短信验证码 -->
			<u-input class="input_code" v-model="params.sms_code" :border="true" height="106"
				:placeholder="i18n.register4" placeholderStyle="color:#CCCCCC" border-color="#D1CBC8" />
			<!-- 获取验证码 -->
			<countdownP uniquekey="fastLogin" :phone="params.login_account" type="5"></countdownP>
		</view>
		<view class="fun_flex">
			<!-- 账号登录 -->
			<view @click="openWin('../index/index')">{{i18n.quicklogin1}}</view>
			<!-- 注册账号 -->
			<view @click="openWin('../register/register')">{{i18n.login6}}</view>
		</view>
		<!-- 登录 -->
		<botBtn :btnText="i18n.login7" @click.native="login"></botBtn>
		<view class="gap-20"></view>
		<view class="footer_protocol">
			<image :src="checked?'../../../static/images/checked.png':'../../../static/images/unselected.png'"
				mode="widthFix" @click="checkedCli()">
			</image>
			<!-- 我已阅读并同意 -->
			<view class="color_ash">{{i18n.login11}}</view>
			<!-- 《用户协议》 -->
			<view class="color_black" @click="openWin('../protocol/protocol')">《{{i18n.login12}}》</view>
			<!-- 和 -->
			<view class="color_ash">和</view>
			<!-- 《隐私政策》 -->
			<view class="color_black" @click="openWin('../policy/policy')">《{{i18n.login13}}》</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					login_account: '',
					sms_code: ''
				},
				value: '',
				checked: true,
			};
		},
		computed: {

		},
		methods: {
			// 勾选用户协议/隐私政策
			checkedCli() {
				if (!this.checked) {
					this.checked = true
				} else {
					this.checked = false
				}
			},
			// 登录
			login() {
				// 当前国际区号是否中国
				if (this.$store.state.areacode == 86) {
					console.log(1)
					if (!this.$u.test.mobile(this.params.login_account)) {
						this.$refs.uToast.show({
							// 请填写正确的手机号
							title: this.i18n.login15,
							type: 'error'
						});
						return false;
					}
				} else {
					if (!this.params.login_account) {
						this.$refs.uToast.show({
							// 请填写手机号
							title: this.i18n.login16,
							type: 'error'
						});
						return false;
					}
				}
				if (!this.params.sms_code) {
					this.$refs.uToast.show({
						// 请填写短信验证码
						title: this.i18n.register14,
						type: 'error'
					});
					return false;
				}
				if (!this.checked) {
					this.$refs.uToast.show({
						// 请勾选已阅读用户协议及隐私政策
						title: this.i18n.login18,
						type: 'error'
					});
					return false;
				}

				this.$u.api.login_make1(this.params).then(res => {
					if (res.code == 200) {
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('id', res.data.user.id)
						this.$refs.uToast.show({
							// 登录成功
							title: this.i18n.login19,
							type: 'success',
							duration: 1000,
						});
						setTimeout(() => {
							uni.switchTab({
								url: '../../tabbar/home/home'
							})
						}, 1000)
					}
				}).catch(err => {

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 30rpx;
		color: #9E9089;
		padding: 54rpx 0 0 64rpx;
	}

	.title_h1 {
		font-size: 50rpx;
		color: #333333;
		margin: 32rpx 0 132rpx 62rpx;
	}

	.u_input {
		margin: 60rpx 74rpx 0 74rpx;
	}

	.u_input1 {
		margin-top: 0;
		border: none;
		padding: 0 20rpx 0 0 !important;
	}

	.fun_flex {
		display: flex;
		justify-content: space-between;
		margin: 36rpx 76rpx 112rpx;
		color: #764E39;
		font-size: 26rpx;
	}

	.input_num {
		margin: 0 74rpx;
		height: 106rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		text-indent: 34rpx;
		border: 1px solid #D1CBC8;
	}

	.authorize_title {
		display: flex;
		justify-content: center;
		color: #666666;
		font-size: 24rpx;
		margin-top: 106rpx;
		align-items: center;

		.line {
			width: 54rpx;
			height: 2rpx;
			margin: 0 24rpx;
		}

		.line_left {
			background: linear-gradient(-90deg, #E6BB81 0%, #FFFFFF 100%);
		}

		.line_right {
			background: linear-gradient(90deg, #E6BB81 0%, #FFFFFF 100%);
		}
	}

	.weibo_login {
		text-align: center;
		margin: 68rpx;

		.weibo_img {
			width: 90rpx;
			height: 90rpx;
		}

		.weibo_text {
			font-size: 24rpx;
			color: #333333;
			margin-top: 28rpx;
		}
	}

	.footer_protocol {
		display: flex;
		justify-content: center;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 30rpx;
		}

		.color_ash {
			color: #999999;
		}

		.color_black {
			color: #333333;
		}
	}

	.input_flex {
		display: flex;
		align-items: center;
		margin: 60rpx 76rpx 0;

		.input_code {
			flex: 2;
		}
	}
</style>
